<template>
<view class='uni-icon' :style='style' />
</template>

<script setup lang="ts">
  import { IconProps } from '../props'
  import { useIconfont } from '../useIconfont'
  import { computed } from 'vue'
  const props = defineProps(IconProps)
  const {
  colors,
  svgSize,
  quot,
  isStr,
  } = useIconfont(props)
  const style = computed(() => {
      return `background-image: url(${quot.value}data:image/svg+xml, %3Csvg viewBox='0 0 1024 1024' xmlns='http://www.w3.org/2000/svg' width='${svgSize.value}px' height='${svgSize.value}px'%3E%3Cpath d='M511.94881 0C229.227754 0 0.05119 230.814637 0 515.532094c3.941612 281.90202 231.992002 508.314337 511.89762 508.314337s507.956009-226.412318 511.897621-508.314337c-0.05119-284.615077-229.125375-515.378524-511.744051-515.480904h-0.10238z' fill='${(isStr.value ? colors.value : colors.value[0]) || 'rgb(232,248,251)'}' /%3E%3Cpath d='M513.177365 569.793241c85.282144-0.307139 154.183563-69.720456 153.876424-155.002599-0.307139-85.282144-69.669266-154.183563-154.951409-153.927615-41.002999 0.153569-80.214357 16.534293-109.085383 45.610078a154.480464 154.480464 0 0 0-44.842232 109.443712c0.307139 85.333333 69.720456 154.234753 155.0026 153.876424zM740.10158 727.969606c-0.10238-1.279744-0.255949-2.508298-0.511898-3.736853a246.821676 246.821676 0 0 0-89.991602-143.587282 30.355529 30.355529 0 0 0-34.194761-1.433313 193.630394 193.630394 0 0 1-207.062587-1.433314 30.437433 30.437433 0 0 0-34.194761 1.433314 246.657868 246.657868 0 0 0-89.991602 143.689662c-3.378524 16.892621 7.627275 33.324535 24.519896 36.703059 1.279744 0.255949 2.559488 0.409518 3.839232 0.511898 21.806839 1.433313 50.268346 1.433313 85.538093 1.433313l227.743251 1.433313c34.194761 0 62.758648 0 85.538092-1.433313h-0.153569c17.25095-1.382124 30.15077-16.380724 28.922216-33.580484z' fill='${(isStr.value ? colors.value : colors.value[1]) || 'rgb(100,204,225)'}' /%3E%3C/svg%3E${quot.value}); width: ${svgSize.value}px; height: ${svgSize.value}px;`
  })
</script>
